{% load admin_static %}{% load staticfiles %}{% load firstof from future %}
<!DOCTYPE html>
<html lang="{{ LANGUAGE_CODE|default:"en-us" }}" {% if LANGUAGE_BIDI %}dir="rtl"{% endif %}>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="嗨圈子,hi,圈子,找人,微梦,社交,同学,朋友,活动,交友">
    <meta name="description" content="嗨圈子,让世界嗨起来,让我们一起来参加活动">
    <meta name="author" content="微梦团队">

    <link rel="shortcut icon" href="{% static 'hqz/images/favicon.ico' %}">

    <title>嗨圈子</title>

    <link rel="stylesheet" type="text/css" href="{% static 'hqz/css/bootstrap.css' %}"/>
    <link rel="stylesheet" type="text/css" href="{% static 'hqz/css/carousel.css' %}"/>
    <link rel="stylesheet" type="text/css" href="{% static 'hqz/css/signin.css' %}"/>
    <link rel="stylesheet" type="text/css" href="{% static 'hqz/css/font-awesome.min.css' %}"/>
    <link rel="stylesheet" type="text/css" href="{% static 'hqz/css/custom.css' %}"/>

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
        <script src="{% static 'hqz/js/html5shiv.js' %}"></script>
        <script src="{% static 'hqz/js/respond.min.js' %}"></script>
    <![endif]-->
</head>
{% load i18n %}

<body>

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">嗨圈子</a>
        </div>
        <div class="navbar-collapse collapse">
            <form novalidate="novalidate" id="login-form" class="navbar-form navbar-right" role="form" method="post"
                  action="{% url 'hqz:login' %}">
                {% csrf_token %}
                <div class="row">
                    <div class="form-group col-md-5">
                        <input type="text" name="username" id="username" placeholder="邮箱"
                               class="form-control required email"
                               data-popover-offset="45,-120">
                    </div>
                    <div class="form-group col-md-5">
                        <input type="password" name="password" id="password" placeholder="密码"
                               class="form-control required"
                               data-popover-position="bottom" data-popover-offset="45,-120">
                    </div>
                    <div class="col-md-2">
                        <button type="submit" class="btn btn-success submit-btn">登录</button>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-5">
                        <label class="checkbox">
                            <input type="checkbox" value="remember-me">记住我
                        </label>
                    </div>
                    <div class="col-md-5">
                        <a href="{% url 'admin:password_change' %}">忘记密码？</a>
                    </div>
                    <div class="col-md-2"></div>
                </div>
                <input type="hidden" name="next" value="{% url 'hqz:main' %}"/>
            </form>
        </div>
        <!--/.navbar-collapse -->
    </div>
</div>

<div class="container">
    <div class="row featurette signup-heading">
        {% if form.errors %}
            <div class="alert alert-danger">你所输入的用户名和密码不匹配，请重新尝试。</div>
        {% endif %}
        {% if error_message %}
            <div class="alert alert-danger">{{ error_message }}</div>
        {% endif %}
    </div>

    <div class="row featurette">
        <div class="col-md-7">
            <img class="featurette-heading img-responsive" src="{% static 'hqz/images/guide.jpg' %}"
                 alt="HI嗨圈子">
        </div>
        <div class="col-md-5">
            <div class="navbar-collapse collapse signup-heading">
                <form novalidate="novalidate" id="signup-form" action="{% url 'hqz:register' %}" class="form-signin"
                      role="form" method="post">
                    {% csrf_token %}
                    <h2 class="form-signin-heading">新用户注册</h2>
                    <input type="text" name="nickname" placeholder="昵称" class="form-control required">
                    <input type="text" name="email" placeholder="邮箱" class="form-control required email">
                    <input type="text" name="register_code" placeholder="注册码"
                           class="form-control required">
                    <input type="password" name="reg_password" placeholder="新密码"
                           class="form-control required">

                    <div class="row">
                        <div class="col-md-4"><label class="radio">
                            <input type="radio" name="sex" value="female" data-popover-position="right"
                                   data-popover-offset="-10, 150">女生
                        </label></div>
                        <div class="col-md-4"><label class="radio">
                            <input type="radio" name="sex" value="male">男生
                        </label></div>
                        <div class="col-md-4"></div>
                    </div>
                    <button class="btn btn-lg btn-primary btn-block" type="submit">注册</button>
                </form>
            </div>
        </div>
    </div>

    <hr>

    <footer>
        <p>&copy; 微梦团队 2014</p>
    </footer>
</div>
<!-- /container -->


<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="{% static 'hqz/js/jquery-1.10.2.min.js' %}"></script>
<script src="{% static 'hqz/js/bootstrap.min.js' %}"></script>
<script src="{% static 'hqz/js/gist-embed.js' %}"></script>
<script src="{% static 'hqz/js/jquery.validate.min.js' %}"></script>
<script src="{% static 'hqz/js/jquery.validate.bootstrap.popover.min.js' %}"></script>
<script src="{% static 'hqz/js/localization/messages_zh.js' %}"></script>
<script src="{% static 'hqz/js/additional-methods.js' %}"></script>
<script type="text/javascript">
    $(function () {
        $('#signup-form').validate_popover({
            popoverPosition: 'right',
            rules: {
                nickname: {
                    required: true,
                    minlength: 3,
                    maxlength: 15,
                    alphanumeric: true
                },
                email: {
                    required: true,
                    email: true
                },
                register_code: {
                    required: true,
                    minlength: 3,
                    maxlength: 80
                },
                reg_password: {
                    required: true,
                    minlength: 6,
                    maxlength: 15
                },
                sex: "required"
            },
            messages: {
                nickname: {
                    required: "昵称不能为空",
                    alphanumeric: "请仅输入字母，数字以及下划线"
                },
                email: {
                    required: "邮箱不能为空"
                },
                register_code: {
                    required: "注册码不能为空"
                },
                reg_password: {
                    required: "密码不能为空",
                    minlength: "密码必须至少为6个字符长"
                },
                sex: "请选择性别"
            }
        });

        $('#login-form').validate_popover({
            popoverPosition: 'bottom',
            rules: {
                username: {
                    required: true,
                    email: true
                },
                password: {
                    required: true,
                    minlength: 6
                }
            },
            messages: {
                username: {
                    required: "邮箱不能为空"
                },
                password: {
                    required: "密码不能为空",
                    minlength: "密码必须至少为6个字符长"
                }
            }
        });
    });
</script>

</body>
</html>
